<template>
  <div class="category-select">
    <h3>选择商品类目</h3>
    <p class="tip">商品类目为三级类目，商户需选择至末级类目，选择完成后可进行下一步。</p>
    
    <div class="category-content">
      <el-row :gutter="20">
        <!-- 一级类目 -->
        <el-col :span="8">
          <div class="category-box">
            <div class="category-header">一级类目</div>
            <div class="category-list">
              <div
                v-for="item in level1Categories"
                :key="item.id"
                class="category-item"
                :class="{ active: modelValue.level1 === item.id }"
                @click="selectLevel1(item)"
              >
                {{ item.name }}
                <el-icon v-if="modelValue.level1 === item.id"><Check /></el-icon>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 二级类目 -->
        <el-col :span="8">
          <div class="category-box">
            <div class="category-header">二级类目</div>
            <div class="category-list">
              <div
                v-for="item in level2Categories"
                :key="item.id"
                class="category-item"
                :class="{ active: modelValue.level2 === item.id }"
                @click="selectLevel2(item)"
              >
                {{ item.name }}
                <el-icon v-if="modelValue.level2 === item.id"><Check /></el-icon>
              </div>
              <div v-if="level2Categories.length === 0" class="empty-tip">
                请先选择一级类目
              </div>
            </div>
          </div>
        </el-col>

        <!-- 三级类目 -->
        <el-col :span="8">
          <div class="category-box">
            <div class="category-header">三级类目</div>
            <div class="category-list">
              <div
                v-for="item in level3Categories"
                :key="item.id"
                class="category-item"
                :class="{ active: modelValue.level3 === item.id }"
                @click="selectLevel3(item)"
              >
                {{ item.name }}
                <el-icon v-if="modelValue.level3 === item.id"><Check /></el-icon>
              </div>
              <div v-if="level3Categories.length === 0" class="empty-tip">
                请先选择二级类目
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 已选类目展示 -->
      <div v-if="modelValue.level3" class="selected-category">
        <span class="label">已选类目：</span>
        <el-tag type="success" size="large">
          {{ modelValue.level1Name }} / {{ modelValue.level2Name }} / {{ modelValue.level3Name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { categoryData } from '../../utils/productMock'

export default {
  name: 'CategorySelect',
  components: {
    Check
  },
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        level1: null,
        level2: null,
        level3: null,
        level1Name: '',
        level2Name: '',
        level3Name: ''
      })
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const level1Categories = ref(categoryData)
    const level2Categories = ref([])
    const level3Categories = ref([])

    // 选择一级类目
    const selectLevel1 = (item) => {
      const newValue = {
        level1: item.id,
        level1Name: item.name,
        level2: null,
        level2Name: '',
        level3: null,
        level3Name: ''
      }
      emit('update:modelValue', newValue)
      
      // 加载二级类目
      level2Categories.value = item.children || []
      level3Categories.value = []
    }

    // 选择二级类目
    const selectLevel2 = (item) => {
      const newValue = {
        ...props.modelValue,
        level2: item.id,
        level2Name: item.name,
        level3: null,
        level3Name: ''
      }
      emit('update:modelValue', newValue)
      
      // 加载三级类目
      level3Categories.value = item.children || []
    }

    // 选择三级类目
    const selectLevel3 = (item) => {
      const newValue = {
        ...props.modelValue,
        level3: item.id,
        level3Name: item.name
      }
      emit('update:modelValue', newValue)
    }

    // 监听modelValue变化，恢复选择状态
    watch(() => props.modelValue.level1, (newVal) => {
      if (newVal) {
        const level1Item = level1Categories.value.find(item => item.id === newVal)
        if (level1Item) {
          level2Categories.value = level1Item.children || []
        }
      }
    }, { immediate: true })

    watch(() => props.modelValue.level2, (newVal) => {
      if (newVal && level2Categories.value.length > 0) {
        const level2Item = level2Categories.value.find(item => item.id === newVal)
        if (level2Item) {
          level3Categories.value = level2Item.children || []
        }
      }
    }, { immediate: true })

    return {
      level1Categories,
      level2Categories,
      level3Categories,
      selectLevel1,
      selectLevel2,
      selectLevel3
    }
  }
}
</script>

<style scoped>
.category-select {
  padding: 20px;
}

.category-select h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #303133;
}

.tip {
  margin: 0 0 20px 0;
  color: #909399;
  font-size: 14px;
}

.category-content {
  margin-top: 20px;
}

.category-box {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.category-header {
  background-color: #f5f7fa;
  padding: 12px 15px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #dcdfe6;
}

.category-list {
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.category-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-item:last-child {
  border-bottom: none;
}

.category-item:hover {
  background-color: #f5f7fa;
}

.category-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 500;
}

.empty-tip {
  padding: 50px 20px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.selected-category {
  margin-top: 30px;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #b3d8ff;
}

.selected-category .label {
  font-weight: 500;
  color: #606266;
  margin-right: 10px;
}
</style>
